<template>
  <view class="realname-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/Images/shop/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="title">认证成功</view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 标题与副标题 -->
      <view class="form-header">
        <view class="form-title">您的实名认证信息如下</view>
      </view>

      <view class="form-section">
        <view class="section-title">您的身份信息</view>

        <!-- 姓名 -->
        <view class="input-item">
          <view class="input-label">姓名</view>
          <input class="input-field" type="text" placeholder="请输入本人姓名" :value="formData.name" disabled @click="preventFocus" />
        </view>

        <!-- 身份证 -->
        <view class="input-item">
          <view class="input-label">身份证</view>
          <input class="input-field" type="idcard" placeholder="请输入本人身份证号" :value="formData.idCard" disabled @click="preventFocus" />
        </view>
      </view>

      <!-- 提示信息 -->
      <view class="tips-section">
        <view class="tip-title">提示：</view>
        <view class="tip-content">恭喜您，您的账号已经认证成功，已成为本平台的正式商户，您可以进行商品分销，卡密商品发布，直充订单抢单代充等业务！</view>
      </view>

     
      <!-- 提交按钮 -->
      <button class="submit-btn" @click="goToMyProfile">返回我的页面</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { userApi } from '@/utils/api';

// 表单数据
const formData = ref({
  name: '',
  idCard: '',
  phone: '135****2654',
  code: ''
});

// 是否同意协议
const isAgreed = ref(false);

// 验证码倒计时
const countdown = ref(0);
let timer = null;

// 表单验证：名称/身份证/验证码 + 勾选协议
const isFormValid = computed(() => {
  return (
    formData.value.name.trim() !== '' &&
    formData.value.idCard.trim() !== '' &&
    formData.value.code.trim() !== '' &&
    isAgreed.value
  );
});

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 新增：返回我的页面
const goToMyProfile = () => {
  uni.navigateTo({ url: '/pages/users/index' });
};

// 切换协议同意状态
const toggleAgreement = () => {
  isAgreed.value = !isAgreed.value;
};

// 打开协议
const openAgreement = () => {
  uni.showToast({
    title: '协议页面开发中',
    icon: 'none'
  });
};

// 发送验证码
const sendVerificationCode = () => {
  if (countdown.value > 0) return;
  
  // 模拟发送验证码
  uni.showToast({
    title: '验证码已发送',
    icon: 'success'
  });
  
  // 开始倒计时
  countdown.value = 60;
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 提交表单
const submitForm = () => {
  if (!isFormValid.value) return;
  
  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    
    // 跳转到认证成功页面
    uni.navigateTo({
      url: '/pages/common/success?type=verification'
    });
  }, 1500);
};

// 组件卸载时清除定时器
onMounted(() => {
  return () => {
    if (timer) {
      clearInterval(timer);
    }
  };
});

const preventFocus = () => {
  uni.showToast({ title: '认证信息不可修改', icon: 'none' });
};

// 拉取用户信息：渲染 real_name 和 idcard
const fetchUserInfo = async () => {
  try {
    const response = await userApi.getUserInfo();
    const data = (response && (response.data?.data ?? response.data ?? response)) || {};
    // 真实姓名：优先 real_name
    formData.value.name = data?.real_name || data?.name || data?.nick_name || data?.nickname || '';
    // 身份证：兼容多种字段
    formData.value.idCard = data?.idcard || data?.id_card || data?.idNo || data?.id_number || '';

    // 选填：如果后端返回手机号则做掩码展示
    const phone = String(data?.mobile ?? data?.phone ?? '');
    if (phone) {
      formData.value.phone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  } catch (err) {
    console.error('获取用户信息失败:', err);
  }
};

onMounted(() => {
  fetchUserInfo();
  return () => {
    if (timer) clearInterval(timer);
  };
});
</script>

<style lang="scss">
.realname-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 导航栏 */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #ffffff;
  padding-top: var(--status-bar-height, 44px);
}

.back-btn {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

/* 表单容器 */
.form-container {
  padding: 40rpx 30rpx;
  background-color: #fff;
  margin-top: 0.5rem;
}

.form-header {
  margin-bottom: 60rpx;
}

.form-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.form-subtitle {
  font-size: 28rpx;
  color: #666;
}

.form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 40rpx;
}

/* 输入项 */
.input-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  background-color: #f7f7f7;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  border: none;
}

/* 取消末项下边框 */
.input-item:last-child {
  border-bottom: none;
}

.input-label {
  width: 160rpx;
  font-size: 30rpx;
  color: #666;
  margin-left: 0;
}

.input-field {
  flex: 1;
  height: 60rpx;
  font-size: 30rpx;
  color: #333;
}

.input-field[disabled] {
  color: #999;
}

/* 验证码行 左输入右按钮 */
.verification-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.code-box {
  flex: 1;
  margin: 0;
}

.send-code-btn {
  width: 220rpx;
  height: 72rpx;
  line-height: 72rpx;
  background-color: transparent;
  color: #FF3037;
  font-size: 26rpx;
  text-align: center;
  border-radius: 36rpx;
  padding: 0;
  border: 2rpx solid #FF3037;
}

.send-code-btn[disabled] {
  background-color: transparent;
  color: #ccc;
  border-color: #ccc;
}

/* 提示信息 */
.tips-section {
  margin-bottom: 40rpx;
}

.tip-title {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #FF6B35;
}

.tip-content {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

/* 协议同意 */
.agreement-section {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.checkbox-container {
  margin-right: 20rpx;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
  position: relative;
}

.checkbox.checked {
  border-color: #FF3037;
  background-color: #FF3037;
}

.checkbox.checked::after {
  content: '';
  position: absolute;
  left: 12rpx;
  top: 6rpx;
  width: 8rpx;
  height: 16rpx;
  border-right: 4rpx solid #fff;
  border-bottom: 4rpx solid #fff;
  transform: rotate(45deg);
}

.agreement-text {
  font-size: 26rpx;
  color: #666;
}

.agreement-link {
  color: #FF3037;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #FF3037;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  text-align: center;
  margin-top: 40rpx;
}

.submit-btn[disabled],
.btn-disabled {
  background-color: #ccc !important;
  color: #fff !important;
  opacity: 1;
}
</style>